<template>
  <l-layout class="l-tab-page scenicAreasBI" id="scenicAreasBI">
    <div class="box l-rblock" :style="{overflow:scale==1?'auto': ''}">
      <div class="box_2 l-rblock"  :style="{transform:`scaleY(${scale})`,transformOrigin: 'top'}">
        <img
          src="../../assets/bg.png"
          alt=""
          style="width: 100%; height: 100%; position: absolute; left: 0; top: 0"
        />
        <div class="biContent l-rblock">
          <div class="biTop">
            <div class="top_left">城方信息技术有限公司</div>
            <div class="top_center">
              <img src="../../assets/head.png" alt="" style="width: 100%" />
            </div>
            <div class="top_right">
              <span>2022年07月16日 星期六</span>
              <span style="margin-left: 16px; margin-right: 9px">晴</span>
              <i
                class="el-icon-sunny"
                style="color: #ffce59; margin-right: 17px"
              ></i>
              <span>20℃~24℃</span>
            </div>
          </div>
          <div class="biDown">
            <div class="down_left">
              <div class="l-rblock box1">
                <img
                  src="../../assets/border1.png"
                  alt=""
                  style="width: 100%"
                  class="bg_img"
                />
                <div class="left_top">
                  <img src="../../assets/b1.png" alt="" />
                  <span>实时客流统计</span>
                </div>
                <p style="margin-top: 23px" class="p1">
                  <span>今日实时客流</span>
                  <span style="float: right">804563人</span>
                </p>
                <el-progress
                  :show-text="false"
                  :stroke-width="8"
                  :percentage="82.8"
                  color="#5E95FF"
                ></el-progress>
                <p style="margin-top: 16px" class="p1">
                  <span>昨日同期客流</span>
                  <span style="float: right">11246人</span>
                </p>
                <el-progress
                  :show-text="false"
                  :stroke-width="8"
                  :percentage="47.1"
                  color="#0CFEF5"
                ></el-progress>
                <div class="flex1" style="margin-top: 20px">
                  <div style="width: 120px; height: 120px">
                    <l-echarts :option="yesterdayPie" style="height: 120px" />
                  </div>
                  <div style="width: 120px; height: 120px">
                    <l-echarts :option="todayPie" style="height: 120px" />
                  </div>
                </div>
                <div class="flex1">
                  <div class="p1">昨日同期客流量</div>
                  <div class="p1">今日实时客流量</div>
                </div>
                <div style="height: 180px; margin-top: 20px">
                  <l-echarts :option="lineOption" style="height: 180px" />
                </div>
              </div>
              <div class="l-rblock down_left2">
                <img
                  src="../../assets/border1.png"
                  alt=""
                  style="width: 100%"
                  class="bg_img"
                />
                <div class="left_top">
                  <img src="../../assets/b1.png" alt="" />
                  <span>全场顾客画像</span>
                </div>
                <div class="progressbox">
                  <p class="p1" style="line-height: 2.5">男</p>
                  <div style="width: 50%" class="progress1">
                    <p class="p1">60%</p>
                    <el-progress
                      :show-text="false"
                      :stroke-width="8"
                      :percentage="82.8"
                      color="#5E95FF"
                    ></el-progress>
                  </div>

                  <div style="width: 35%" class="progress2">
                    <p class="p1">30%</p>
                    <el-progress
                      :show-text="false"
                      :stroke-width="8"
                      :percentage="82.8"
                      color="#5E95FF"
                    ></el-progress>
                  </div>
                  <p class="p1" style="line-height: 2.5">女</p>
                </div>
                <div style="width: 100%; height: 350px; position: relative">
                  <l-echarts
                    :option="funnelOption"
                    style="height: 350px"
                  ></l-echarts>
                </div>
              </div>
            </div>
            <div class="down_center">
              <div class="l-rblock box1">
                <img src="../../assets/border2.png" alt="" class="bg_img" />
                <div
                  style="
                    height: 50px;
                    display: flex;
                    justify-content: space-between;
                  "
                  class="font20"
                >
                  <div style="display: flex; align-items: center; width: 50%">
                    <p>今年累计客流：</p>
                    <div class="border_img">
                      <span>8</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                    <div class="border_img">
                      <span>3</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                    <div class="border_img">
                      <span>7</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                    <div class="border_img">
                      <span>5</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                    <div class="border_img">
                      <span>1</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                    <div class="border_img">
                      <span>7</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                  </div>
                  <div style="display: flex; align-items: center; width: 48%">
                    <p>今日累计客流：</p>
                    <div class="border_img">
                      <span>3</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                    <div class="border_img">
                      <span>7</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                    <div class="border_img">
                      <span>5</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                    <div class="border_img">
                      <span>1</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                    <div class="border_img">
                      <span>7</span>
                      <img src="../../assets/border2.png" alt="" />
                    </div>
                  </div>
                </div>
                <div
                  style="
                    margin-top: 40px;
                    display: flex;
                    justify-content: space-between;
                    position: relative;
                  "
                >
                  <div style="width: 54px">
                    <div
                      class="width54"
                      @click="imgIndex = 9"
                      :style="{
                        backgroundColor: imgIndex == 9 ? '#1c90f6' : '',
                      }"
                    >
                      9
                    </div>
                    <div
                      class="width54"
                      @click="imgIndex = 8"
                      :style="{
                        backgroundColor: imgIndex == 8 ? '#1c90f6' : '',
                      }"
                    >
                      8
                    </div>
                    <div
                      class="width54"
                      @click="imgIndex = 7"
                      :style="{
                        backgroundColor: imgIndex == 7 ? '#1c90f6' : '',
                      }"
                    >
                      7
                    </div>
                    <div
                      class="width54"
                      @click="imgIndex = 6"
                      :style="{
                        backgroundColor: imgIndex == 6 ? '#1c90f6' : '',
                      }"
                    >
                      6
                    </div>
                    <div
                      class="width54"
                      @click="imgIndex = 5"
                      :style="{
                        backgroundColor: imgIndex == 5 ? '#1c90f6' : '',
                      }"
                    >
                      5
                    </div>
                    <div
                      class="width54"
                      @click="imgIndex = 4"
                      :style="{
                        backgroundColor: imgIndex == 4 ? '#1c90f6' : '',
                      }"
                    >
                      4
                    </div>
                    <div
                      class="width54"
                      @click="imgIndex = 3"
                      :style="{
                        backgroundColor: imgIndex == 3 ? '#1c90f6' : '',
                      }"
                    >
                      3
                    </div>
                    <div
                      class="width54"
                      @click="imgIndex = 2"
                      :style="{
                        backgroundColor: imgIndex == 2 ? '#1c90f6' : '',
                      }"
                    >
                      2
                    </div>
                    <div
                      class="width54"
                      @click="imgIndex = 1"
                      :style="{
                        backgroundColor: imgIndex == 1 ? '#1c90f6' : '',
                      }"
                    >
                      1
                    </div>
                    <div
                      class="width54"
                      @click="imgIndex = -1"
                      :style="{
                        backgroundColor: imgIndex == -1 ? '#1c90f6' : '',
                      }"
                    >
                      B1
                    </div>
                    <div
                      class="width54"
                      @click="imgIndex = -2"
                      :style="{
                        backgroundColor: imgIndex == -2 ? '#1c90f6' : '',
                      }"
                    >
                      B2
                    </div>
                  </div>
                  <img
                    src="../../assets/1.png"
                    v-if="imgIndex == 1"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <img
                    src="../../assets/2.png"
                    v-if="imgIndex == 2"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <img
                    src="../../assets/3.png"
                    v-if="imgIndex == 3"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <img
                    src="../../assets/4.png"
                    v-if="imgIndex == 4"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <img
                    src="../../assets/5.png"
                    v-if="imgIndex == 5"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <img
                    src="../../assets/6.png"
                    v-if="imgIndex == 6"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <img
                    src="../../assets/7.png"
                    v-if="imgIndex == 7"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <img
                    src="../../assets/8.png"
                    v-if="imgIndex == 8"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <img
                    src="../../assets/9.png"
                    v-if="imgIndex == 9"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <img
                    src="../../assets/10.png"
                    v-if="imgIndex == -1"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <img
                    src="../../assets/11.png"
                    v-if="imgIndex == -2"
                    alt=""
                    style="width: 70%; height: 464px"
                  />
                  <div style="width: 135px; padding-top: 50px">
                    <div class="width135">
                      <p style="color: #34d4f5">
                        <span style="font-size: 24px">21162</span>人
                      </p>
                      <p>商场实时人数</p>
                    </div>
                    <div class="width135">
                      <p style="color: #34d4f5">
                        <span style="font-size: 24px">264</span>家
                      </p>
                      <p>商场店铺数量</p>
                    </div>
                    <div class="width135">
                      <p style="color: #34d4f5">
                        <span style="font-size: 24px">45743</span>平方米
                      </p>
                      <p>商场总面积</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="l-rblock box2">
                <div>
                  <img
                    src="../../assets/border4.png"
                    alt=""
                    style="width: 100%"
                    class="bg_img"
                  />
                  <div class="left_top">
                    <img src="../../assets/b2.png" alt="" />
                    <span>实时车流量</span>
                  </div>
                  <div class="flex1" style="margin-top: 15px">
                    <div class="p1">
                      总访问量<span style="font-size: 24px">5367</span>辆
                    </div>
                    <div class="p1">
                      同比增长<span style="font-size: 24px">23%</span>
                    </div>
                  </div>
                  <div class="flex1" style="margin-top: 21px">
                    <img
                      src="../../assets/car1.png"
                      alt=""
                      style="height: 73px"
                    />
                    <img
                      src="../../assets/car2.png"
                      alt=""
                      style="height: 73px"
                    />
                  </div>
                  <div class="flex1" style="margin-top: 18px">
                    <div class="p1">
                      已用车位<span style="font-size: 24px; color: #fdbd52"
                        >370</span
                      >
                    </div>
                    <div class="p1">
                      剩余车位<span style="font-size: 24px; color: #34d4f5"
                        >35</span
                      >
                    </div>
                  </div>
                  <div class="pro2">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="12"
                      :percentage="72.1"
                      color="#5E95FF"
                      style="font-size: 12px"
                    ></el-progress>
                  </div>
                </div>
                <div class="top5">
                  <img
                    src="../../assets/border4.png"
                    alt=""
                    style="width: 100%"
                    class="bg_img"
                  />
                  <div class="left_top">
                    <img src="../../assets/b2.png" alt="" />
                    <span>店铺排行TOP5</span>
                  </div>
                  <p style="margin-top: 23px" class="p3">
                    <span>No.1 重庆土特产</span>
                    <span style="float: right">1356人</span>
                  </p>
                  <el-progress
                    :show-text="false"
                    :stroke-width="8"
                    :percentage="82.8"
                    color="#FFCC00"
                  ></el-progress>
                  <p class="p3">
                    <span>No.2 雷农民酸辣粉</span>
                    <span style="float: right">1253人</span>
                  </p>
                  <el-progress
                    :show-text="false"
                    :stroke-width="8"
                    :percentage="72.8"
                    color="#9E0CFF"
                  ></el-progress>
                  <p class="p3">
                    <span>No.3 重庆土特产</span>
                    <span style="float: right">956人</span>
                  </p>
                  <el-progress
                    :show-text="false"
                    :stroke-width="8"
                    :percentage="62.8"
                    color="#01CFC5"
                  ></el-progress>
                  <p class="p3">
                    <span>No.4 重庆土特产</span>
                    <span style="float: right">842人</span>
                  </p>
                  <el-progress
                    :show-text="false"
                    :stroke-width="8"
                    :percentage="52.8"
                    color="#018CFF"
                  ></el-progress>
                  <p class="p3">
                    <span>No.5 重庆土特产</span>
                    <span style="float: right">633人</span>
                  </p>
                  <el-progress
                    :show-text="false"
                    :stroke-width="8"
                    :percentage="42.8"
                    color="#6633FF"
                  ></el-progress>
                </div>
              </div>
            </div>
            <div class="down_right">
              <div class="l-rblock box1">
                <img
                  src="../../assets/border5.png"
                  alt=""
                  style="width: 100%"
                  class="bg_img"
                />
                <div class="left_top">
                  <img src="../../assets/b1.png" alt="" />
                  <span>实时热度统计</span>
                </div>
                <div
                  style="
                    width: 100%;
                    height: 450px;
                    position: relative;
                    top: 27px;
                  "
                >
                  <l-echarts
                    :option="radarOption"
                    style="height: 100%"
                  ></l-echarts>
                </div>
              </div>
              <div class="l-rblock box2">
                <img
                  src="../../assets/border5.png"
                  alt=""
                  style="width: 100%"
                  class="bg_img"
                />
                <div class="left_top">
                  <img src="../../assets/b1.png" alt="" />
                  <span>外来游客分析</span>
                </div>
                <div
                  style="
                    width: 100%;
                    height: 400px;
                    position: relative;
                    top: 27px;
                  "
                >
                  <l-echarts
                    :option="pie2Option"
                    style="height: 400px"
                  ></l-echarts>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </l-layout>
</template>

<script>
export default {
  data() {
    return {
      pieOption: {
        grid: {
          top: "10%",
          bottom: "10%",
        },
        series: [],
      },
      imgIndex: 1,
      scale: 1
    };
  },
  created() {},
  mounted() {
    this.initSize();
  },
  computed: {
    // 昨日同期客流量
    yesterdayPie() {
      let option = this.$deepClone(this.pieOption);
      option.series = [
        {
          name: "Access From",
          type: "pie",
          radius: ["45%", "60%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center",
            fontSize: 14,
            color: "#0CFEF5",
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 15000,
              name: "Direct",
              itemStyle: {
                color: "none",
              },
            },
            {
              value: 11246,
              name: "11246",
              itemStyle: {
                color: "#0CFEF5",
              },
            },
          ],
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["63%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center",
            fontSize: 14,
            color: "#0CFEF5",
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 11246,
              name: "11246",
              itemStyle: {
                color: "#0CFEF5",
              },
            },
          ],
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["80%", "90%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center",
            fontSize: 14,
            color: "#0CFEF5",
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 11246,
              name: "11246",
              itemStyle: {
                color: "#0CFEF5",
              },
            },
          ],
        },
      ];
      return option;
    },
    todayPie() {
      let option = this.$deepClone(this.pieOption);
      option.series = [
        {
          name: "Access From",
          type: "pie",
          radius: ["45%", "60%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center",
            fontSize: 14,
            color: "#5E95FF",
          },
          emphasis: {
            label: {
              show: false,
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 50000,
              name: "Direct",
              itemStyle: {
                color: "none",
              },
            },
            {
              value: 804563,
              name: "804563",
              itemStyle: {
                color: "#5E95FF",
              },
            },
          ],
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["63%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center",
            fontSize: 14,
            color: "#5E95FF",
          },
          emphasis: {
            label: {
              show: false,
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 804563,
              name: "804563",
              itemStyle: {
                color: "#5E95FF",
              },
            },
          ],
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["80%", "90%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: "center",
            fontSize: 14,
            color: "#5E95FF",
          },
          emphasis: {
            label: {
              show: false,
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 804563,
              name: "804563",
              itemStyle: {
                color: "#5E95FF",
              },
            },
          ],
        },
      ];
      return option;
    },
    lineOption() {
      let option = this.$deepClone(this.pieOption);
      option.grid = {
        top: "20%",
        bottom: "20%",
        left: "12%",
      };
      (option.xAxis = {
        type: "category",
        boundaryGap: false,
        splitLine: {
          show: true,

          lineStyle: {
            color: ["#999999"],
          },
        },
        data: ["07-10", "07-11", "07-12", "07-13", "07-14", "07-15", "07-16"],
        axisLabel: {
          textStyle: {
            color: "#ffffff",
          },
        },
      }),
        (option.yAxis = {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#999999"],
            },
          },
          name: "单位：万人",
          axisLabel: {
            textStyle: {
              color: "#ffffff",
            },
          },
          nameTextStyle: {
            color: "#ffffff",
          },
        }),
        (option.series = [
          {
            data: [1, 3, 1.8, 2, 3.5, 1.8, 2.8],
            type: "line",
            smooth: true,
            showSymbol: true,
            symbolSize: 5,
            areaStyle: {
              opacity: 0.4,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "yellow",
                  },
                  {
                    offset: 1,
                    color: "#ffffff",
                  },
                ],
                global: false,
              },
            },
            itemStyle: {
              color: "yellow",
            },
          },
        ]);
      return option;
    },
    pie2Option() {
      let option = this.$deepClone(this.pieOption);
      option.series = [
        {
          name: "tourist",
          type: "pie",
          radius: [0, 80],
          center: ["50%", "50%"],
          roseType: "area",
          label: {
            textStyle: {
              color: "#ffffff",
            },
          },
          data: [
            {
              value: 18,
              name: "西北地区",
              itemStyle: {
                color: "#FFCC00",
              },
            },
            {
              value: 22,
              name: "华北地区",
              itemStyle: {
                color: "#F35358",
              },
            },
            {
              value: 26,
              name: "东北地区",
              itemStyle: {
                color: "#6633FF",
              },
            },
            {
              value: 28,
              name: "华南地区",
              itemStyle: {
                color: "#00CACF",
              },
            },
            {
              value: 30,
              name: "华中地区",
              itemStyle: {
                color: "#FFAA00",
              },
            },
            {
              value: 32,
              name: "华东地区",
              itemStyle: {
                color: "#018CFF",
              },
            },
            {
              value: 38,
              name: "西南地区",
              itemStyle: {
                color: "#9E0CFF",
              },
            },
          ],
        },
      ];
      return option;
    },
    funnelOption() {
      let option = {
        grid: {
          top: "10%",
          bottom: "10%",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}人 : {c}%",
        },
        legend: {
          data: ["Show", "Click", "Visit", "Inquiry", "Order"],
        },
        series: [
          {
            name: "顾客",
            type: "funnel",
            left: "-5%",
            width: "80%",
            min: 0,
            max: 40,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              borderWidth: 0,
              color: "#FFFFFF",
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              { value: 30, name: "25~45岁 12345" },
              { value: 22, name: "40~60岁 9348" },
              { value: 20, name: "18~25岁 8437" },
              { value: 18, name: "0~18岁 7524" },
              { value: 8, name: "60~75岁 3521" },
            ],
          },
        ],
      };
      return option;
    },
    radarOption() {
      let option = {
        legend: {
          data: ["0-18岁", "19-30岁", "31-60岁", "61-80岁"],
          bottom: "0%",
          textStyle: { color: "#fff" },
        },
        radar: {
          indicator: [
            { name: "服饰", max: 6500 },
            { name: "餐饮", max: 16000 },
            { name: "儿童教育", max: 30000 },
            { name: "休闲娱乐", max: 38000 },
            { name: "影院", max: 52000 },
            { name: "超市", max: 25000 },
          ],
          axisName: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "hot",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "0-18岁",
                symbol: "none",
                areaStyle: {
                  color: "#AECAFF",
                },
                lineStyle: {
                  color: "transparent",
                },
                itemStyle: {
                  color: "#AECAFF",
                },
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "19-30岁",
                symbol: "none",
                areaStyle: {
                  color: "#7FE4E7",
                },
                lineStyle: {
                  color: "transparent",
                },
                itemStyle: {
                  color: "#7FE4E7",
                },
              },
              {
                value: [3000, 6000, 18000, 26000, 32000, 2100],
                name: "31-60岁",
                symbol: "none",
                areaStyle: {
                  color: "#C5BDFD",
                },
                lineStyle: {
                  color: "transparent",
                },
                itemStyle: {
                  color: "#C5BDFD",
                },
              },
              {
                value: [3000, 10000, 16000, 24000, 20000, 11000],
                name: "61-80岁",
                symbol: "none",
                areaStyle: {
                  color: "#FFCC00",
                },
                lineStyle: {
                  color: "transparent",
                },
                itemStyle: {
                  color: "#FFCC00",
                },
              },
            ],
          },
        ],
      };
      return option;
    },
  },
  methods: {
    initSize() {
      let height = document.getElementById("scenicAreasBI").clientHeight
     if(height > 1082) this.scale = height / 1082
    }
  },
};
</script>
<style lang="scss">
.scenicAreasBI {
  .box_2 {
    height: 1082px;
  }
  .biContent {
    padding: 17px 20px 20px;
    overflow: auto;

    .biTop {
      width: 100%;
      height: 89px;
      position: relative;
      .top_left {
        width: 216px;
        height: 24px;
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
        position: absolute;
        top: 20px;
      }
      .top_center {
        width: 1200px;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-600px);
      }
      .top_right {
        height: 24px;
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
        position: absolute;
        right: 0;
        top: 20px;
      }
    }
    .biDown {
      position: absolute;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      .down_left {
        position: relative;
        width: 23%;
        height: 510px;
        .box1 {
          padding: 0 13px 20px 20px;
        }

        .left_top {
          position: relative;
          left: -10px;
          top: 0;
          width: 50%;
          height: 24px;
          text-align: center;
          font-size: 18px;
          font-weight: 400;
          color: #ffffff;
          line-height: 24px;
          > img {
            width: 100%;
            height: 15px;
            position: absolute;
            top: 5px;
            left: 0;
          }
        }
        .p1 {
          font-size: 14px;
          font-weight: bold;
          color: #ffffff;
          line-height: 24px;
          height: 24px;
        }
      }
      .down_center {
        width: 50%;

        margin-top: 28px;
        position: relative;

        .box1 {
          padding: 20px;
          height: 616px;
        }
        .box2 {
          height: 292px;
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          > div {
            width: 48%;
            height: 100%;
            position: relative;
            padding: 20px 16px;
          }
          .left_top {
            position: relative;
            left: 0px;
            top: 0;
            width: 100%;
            height: 24px;
            text-align: center;
            font-size: 18px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            line-height: 24px;
            > img {
              width: 100%;
              height: 15px;
              position: absolute;
              top: 5px;
              left: 0;
            }
          }
          .pro2 {
            margin-top: 15px;
            .el-progress-bar__innerText {
              vertical-align: top;
            }
            .el-progress-bar__inner {
              background-color: unset;
              background-image: linear-gradient(to right, #64fcff, #0089ff);
            }
            .el-progress-bar__outer {
              background-color: #1c90f66b;
            }
          }
          .top5 {
            .el-progress-bar__outer {
              background-color: #1c90f66b;
            }
          }
        }
        .border_img {
          width: 9%;
          height: 48px;
          line-height: 48px;
          position: relative;
          text-align: center;
          margin-right: 6px;
          > img {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        .font20 {
          font-size: 20px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
        }
        .width54 {
          width: 54px;
          height: 32px;
          background: rgba(28, 144, 246, 0.1);
          font-size: 16px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 32px;
          text-align: center;
          margin-bottom: 8px;
          cursor: pointer;
        }
        .width135 {
          width: 135px;
          height: 80px;
          background: rgba(28, 144, 246, 0.1);
          text-align: center;
          color: #ffffff;
          font-size: 16px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          padding: 8px;
          margin-bottom: 30px;
        }
      }
      .down_right {
        width: 23%;
        height: 510px;
        position: relative;
        .box1 {
          height: 510px;
          padding: 0 13px 20px 20px;
        }
        .box2 {
          height: 426px;
          margin-top: 20px;
        }

        .left_top {
          position: absolute;
          top: 0;
          right: 0;
          width: 50%;
          height: 24px;
          text-align: center;
          font-size: 18px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          line-height: 24px;
          > img {
            width: 100%;
            height: 15px;
            position: absolute;
            top: 5px;
            left: 0;
          }
        }
        .p1 {
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          line-height: 24px;
          height: 24px;
        }
      }
      .bg_img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      .down_left2 {
        padding: 0 13px 20px 20px;
        height: 426px;
        margin-top: 20px;
        .progressbox {
          width: 100%;
          display: flex;
          align-items: flex-end;
          justify-content: space-around;
          text-align: center;
          margin-top: 40px;
        }
        .progress1 {
          .el-progress-bar__inner {
            background-color: unset;
            background-image: linear-gradient(to right, #5e95ff, #147ede);
          }
        }
        .progress2 {
          .el-progress-bar__inner {
            background-color: unset;
            background-image: linear-gradient(to right, #ff99ff, #e22dff);
          }
        }
      }
      .down_down {
        position: absolute;
        top: 664px;
        height: 292px;
        width: 50%;
      }
      .flex1 {
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
      }
      .p3 {
        margin-top: 10px;
        margin-bottom: 6px;
      }
    }
  }
}
</style>
